<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1,user-scalable=no"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<link rel="stylesheet" type="text/css" href="css/detail.css"/>
		<script type="text/javascript" src="js/swiper.js" ></script>
	</head>
	<body>
		<header>
			<div class="head-button fl">
				<a href="detail.html"><button>Back</button></a>
			</div>
			<div class="head-xing fr">
				<img src="img/detail/detail4.jpg"/>
			</div>
			<div class="head-closing">
				<p>产品详细</p>
			</div>
		</header>
		<!--主体-->
		<section class="clear">
			<!--轮播-->
			<div class="swiper-container">
        	<div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/detail/detail-banan.jpg"/></div>
            <div class="swiper-slide"><img src="img/detail/detail-banan.jpg"/></div>
            
        </div>
    </div>
				<script>
			    	var swiper = new Swiper('.swiper-container',{
			    		autoplay:1000,
			    		loop:true
			    	});
			    </script>
			<!---->
			<div class="detail-much">
				<div class="detail-much1 fl">
					<p>￥32</p>
				</div>
				<div class="detail-much2 fr">
					<button>购买</button>
				</div>
			</div>
			<!---->
			<div class="detail-ping">
				 <div class="detail-ping1 fl">
				 	<span><img src="img/detail/detail4.jpg"/></span>
				 	<b>好评度<a>99%</a></b>
				 </div>
				 <div class="detail-ping2 fr">
				 	<p>共605个评价&gt;</p>
				 </div>
			</div>
			<!---->
			<div class="detail-cile">
				<div class="detail-cile1 fl">
					<p>适用商户</p>
				</div>
				<div class="detail-cile2 fr">
					<p>&gt;</p>
				</div>
			</div>
			<!--商店-->
			<div class="itemBox clear">
				<div class="item">
					<div class="item_img fl">
						<img src="img/detail/detail1.jpg"/>
					</div>
					<div class="item_btn fr">
						<button>进入</button>
					</div>
					
					<div class="item_msg">
						<h5>万岁寿司（正佳店）</h5>
						<div class="item_score">
							<!--放置星星的容器-->
							<div class="starBox">
								<div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
							    <div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
								<div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
								<div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
								<div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
								<span>10分</span>
							</div>
						</div>
						<p>离你100m</p>
							<a href="">查看详情&gt;&gt;</a>
					</div>
				</div>
				
				
				<div class="item">
					<div class="item_img fl">
						<img src="img/detail/detail2.jpg"/>
					</div>
					<div class="item_btn fr">
						<button>进入</button>
					</div>
					
					<div class="item_msg">
						<h5>万岁寿司（体育西店）</h5>
						<div class="item_score">
							<!--放置星星的容器-->
							<div class="starBox">
								<div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
							    <div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
								<div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
								<div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
								<div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
								<span>10分</span>
							</div>
						</div>
						<p>离你100m</p>
							<a href="">查看详情&gt;&gt;</a>
					</div>
					
				</div>
				<div class="item">
					<div class="item_img fl">
						<img src="img/detail/detail3.jpg"/>
					</div>
					<div class="item_btn fr">
						<button>进入</button>
					</div>
					
					<div class="item_msg">
						<h5>万岁寿司（昌岗店）</h5>
						<div class="item_score">
							<!--放置星星的容器-->
							<div class="starBox">
								<div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
							    <div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
								<div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
								<div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
								<div class="starBox1">
									<img src="img/detail/detail4.jpg"/>
								</div>
								<span>10分</span>
							</div>
						</div>
						<p>离你100m</p>
							<a href="">查看详情&gt;&gt;</a>
					</div>
					
				</div>
				
			</div>
		</section>
		<!--尾-->
			<footer>
				<ul>
					<li><a href="index.html">
							<i class="iconfont icon-noun28593cc"></i>
							<p>首页</p>
						</a></li>
					<li><a href="back.html">
							<i class="iconfont icon-fl"></i>
							<p>分类</p>
						</a></li>
					<li><a href="fash.html">
							<i class="iconfont icon-zhinanzhen"></i>
							<p>发现</p>
						</a></li>
					<li><a href="my.html">
							<i class="iconfont icon-ren"></i>
							<p>我的 </p>
						</a></li>
				</ul>
			</footer>
		
		<script type="text/javascript">
		//动态改变根元素字体大小
			function recalc() {
				var clientWidth = document.documentElement.clientWidth;
				if(!clientWidth) return;
				document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
												//字体大小 = 1个rem单位表示多少个像素，设备的宽度 / 设计宽度
			}

			function initRecalc() {
				recalc();
				var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
				if(!document.addEventListener) return;
				window.addEventListener(resizeEvt, recalc, false);
				document.addEventListener('DOMContentLoaded', recalc, false);
			}
			initRecalc();
		</script>
		<script type="text/javascript">
			document.body.style.height=window.innerHeight+"px";
		</script>
	</body>
</html>
